<template>
  <div id="app">
    <Layout>
      <template #header>
        <header class="header">
          <SiteAside />
        </header>
      </template>
      <main class="main">
        <keep-alive>
          <RouterView v-if="$route.meta.keepAlive" />
        </keep-alive>
        <RouterView v-if="!$route.meta.keepAlive" />
      </main>
      <template #footer> </template>
    </Layout>
    <ToTop />
  </div>
</template>

<script>
import Layout from "@/components/Layout";
import SiteAside from "@/components/SiteAside";

export default {
  name: "App",
  data() {
    return {};
  },
  async created() {
    let resp = await this.getSettingData();
    if (resp.favicon) {
      document.querySelector("#icon").href = resp.favicon;
    }
  },
  components: {
    Layout,
    SiteAside,
  },
  methods: {
    async getSettingData() {
      return await this.$store.dispatch("setting/getSettingData");
    },
  },
};
</script>

<style lang="less" scoped>
@import url(~@/style/var.less);
@import url(~@/style/mixin.less);
#app {
  .self-fill(fixed);
  .header {
    width: 250px;
    height: 100%;
    background-color: @dark;
  }
  .main {
    height: 100%;
  }
  .footer {
    width: 150px;
    height: 100%;
  }
}
</style>
